<script setup lang="ts">
import type { TableProps } from 'ant-design-vue'

import { ref, watch } from 'vue'

import { useVbenModal } from '@vben/common-ui'

import { Button, DatePicker, InputNumber, message, Table } from 'ant-design-vue'

import { getToProcessPurchaseList } from '#/api/spuBom'

import processPurchase_info from './processPurchase_info.vue'

// 定义组件props并获取props引用
const props = defineProps<{
  data: any
}>()

const NeedPurchaseList = ref([])
// 监听data变化，更新表格数据
watch(
  () => props.data,
  (newData) => {
    if (newData) {
      initData(props.data.id)
    }
  },
  { immediate: true },
)

const columns: any = [
  {
    title: '实际工序',
    children: [
      {
        title: '工序名称',
        dataIndex: 'process_name',
        key: 'process_name',
        align: 'center',
      },
      {
        title: '本次供应商',
        dataIndex: 'SupplyNa',
        key: 'SupplyNa',
        align: 'center',
      },
      {
        title: '本次单价',
        dataIndex: 'price',
        key: 'price',
        align: 'center',
      },
      {
        title: '用量',
        dataIndex: 'single_piece',
        key: 'single_piece',
        align: 'center',
      },
      {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
        align: 'center',
      },
    ],
  },
  {
    title: '算料件数',
    dataIndex: 'computedNum',
    key: 'computedNum',
    align: 'center',
  },

  {
    title: '需求量',
    dataIndex: 'need_num',
    key: 'need_num',
    align: 'center',
  },
  {
    title: '已下数量',
    dataIndex: 'purchase_num',
    key: 'purchase_num',
    align: 'center',
  },

  {
    title: '下单差异数',
    dataIndex: 'purchase_need_diff_num',
    key: 'purchase_need_diff_num',
    align: 'center',
  },
  {
    title: '未下数量',
    dataIndex: 'no_purchase_num',
    key: 'no_purchase_num',
    align: 'center',
  },
]

const columns1: any = [
  {
    title: '面料名称',
    dataIndex: 'process_name',
    key: 'process_name',
    align: 'center',
  },
  {
    title: '本次供应商',
    dataIndex: 'SupplyNa',
    key: 'SupplyNa',
    align: 'center',
  },
  {
    title: '单价',
    dataIndex: 'price',
    key: 'price',
    align: 'center',
  },
  {
    title: '单位',
    dataIndex: 'unit',
    key: 'unit',
    align: 'center',
  },
  {
    title: '交期',
    dataIndex: 'delivery_date',
    key: 'delivery_date',
    align: 'center',
  },
]

function initData(id: any) {
  const param = {
    bomId: id,
  }
  getToProcessPurchaseList(param).then((response) => {
    NeedPurchaseList.value = response.data.data.list
  })
}

function refresh() {
  initData(props.data.id)
}

const selectRows: any = ref([])
const rowSelect: TableProps['rowSelection'] = {
  onChange: (selectedRowKeys: any, selectedRows: any) => {
    selectRows.value = selectedRows
  },
}

function placeOrder() {
  if (selectRows.value.length > 0) {
    processPurchase_infoModalApi.setData({ data: selectRows.value, id: props.data.id, purchase_id: props.data.purchase_id }).open()
  } else {
    message.error('请选择面料')
  }
}

const [processPurchase_infoModal, processPurchase_infoModalApi] = useVbenModal({
  connectedComponent: processPurchase_info,
})
// 判断行是否满足条件，如果满足则返回特殊样式类
const getRowClassName = (record) => {
  if (record.not_caigou === 0 && record.cuted_num > 0 && record.purchase_need_diff_num < 0) {
    return 'red-text-row'
  }
  return ''
}
</script>

<template>
  <div style="width: 100%; display: flex; justify-content: flex-end; font-size: 18px"><strong>应采购 :</strong></div>
  <Table
    class="w-fill mb-2"
    :scroll="{ x: '100%', y: 'calc(25vh)' }"
    @resize-column="(w: any, col: any) => (col.width = w)"
    :row-selection="rowSelect"
    bordered
    :data-source="NeedPurchaseList"
    :columns="columns"
    :pagination="false"
    size="small"
    row-key="id"
    :row-class-name="getRowClassName"
  >
    <template #bodyCell="{ column, record }"></template>
  </Table>
  <div style="width: 100%; display: flex; justify-content: flex-end; font-size: 18px"><strong>已选 :</strong></div>

  <Table class="w-fill" @resize-column="(w: any, col: any) => (col.width = w)" bordered :scroll="{ x: '100%', y: 'calc(25vh)' }" :data-source="selectRows" :columns="columns1" :pagination="false" size="small">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'num'">
        <InputNumber v-model:value="record.num" />
      </template>
      <template v-if="column.dataIndex === 'delivery_date'">
        <DatePicker format="YYYY/MM/DD" value-format="YYYY-MM-DD" v-model:value="record.delivery_date" />
      </template>
    </template>
  </Table>
  <div style="width: 100%; display: flex; justify-content: flex-end; font-size: 18px">
    <Button type="primary" @click="placeOrder()">下单</Button>
  </div>

  <processPurchase_infoModal @refresh="refresh()" />
</template>

<style scoped>
:deep(.red-text-row) {
  color: red !important;
}

/* 确保表格单元格中的文本也应用红色 */
:deep(.red-text-row td) {
  color: red !important;
}

/* 确保表格内容中的所有文本元素都应用红色 */
:deep(.red-text-row span),
:deep(.red-text-row div),
:deep(.red-text-row u) {
  color: red !important;
}
</style>
